<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        .name{ float: right;}
        .row{ margin: 0;}
        .shop-img{ text-align: left; padding-left: 30px;}
        .shop-img img{ margin-right: 10px;}
        .panel-body{ padding-bottom:15px; }
        #tbodyId{ font-size: 13px;}
        #myTable thead{ font-size: 14px;}
        #startTime form-control{width: 100%;}
        .date{width: 1%; margin-top: -10px; margin-right: 30px;}
        .form_datetime{width: 320px; margin-left: 30px;}
        #myForm .form-inline{float: right;}
        #depart-box {padding:30px 20px;}
        #depart-box p {width:33%; float: left;}
    </style>
</head>
<body>

<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li>◆&nbsp;<span>该页面展示了所有卡券分类业务，可以对相关卡券进行上架、下架和编辑。</span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body row name">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="form-group">
                <span>卡券套餐金额：</span>
                <input type="text" class="form-control" id="price" placeholder="请输入卡券套餐金额">
            </div>
            <div class="form-group">
                <span>卡券套餐名称：</span>
                <input type="text" class="form-control" id="name" placeholder="请输入卡券套餐名称">
            </div>
            <div id="start_visit_time" class="input-group date form_datetime">
                <span class="input-group-addon">创建时间</span>
                <input id="createTime" name="createTime" class="form-control" size="20" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
            <div class="form-group form-inline">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
            </div>
        </form>
    </div>
    <div class="panel-heading row">
        <button type="button" class="btn btn-primary" onclick="addLine();"><span class="fa fa-plus"></span> 新增</button>
    </div>
</div>
<!-- 分页查询的地址-->
<div class="panel-body panel-white">
    <div class="table-responsive">
        <table id="myTable"
               class="table table-hover"
               data-url="${basePath}/admin/coupon/json"
               data-pageSize="10,50,100" data-method="GET">
            <thead>
            <!-- 需要循环的字段  对应mapper文件-->
            <tr>
                <th data-type="checkbox" data-field="id"></th>
                <th  data-type="xuhao" width="5%">序号</th>
                <th  data-field="couponName" data-call="true" width="8%">卡券类型</th>
                <th  data-field="createTime" data-call="true" width="13%">创建时间</th>
                <th  data-field="name" width="14%">套餐名称</th>
                <th  data-field="price" data-call="true" width ="10%">卡券套餐金额（元）</th>
                <th  data-field="limitTime" data-call="true" width ="10%">限制提现期限（天）</th>
                <th  data-field="proportion" data-call="true" width ="10%">卡券套返现比（%）</th>
                <th  data-field="saleNumber" data-call="true" width ="17%">卡券套餐销售量（单）</th>
                <th  data-field="button" data-call="true" width="15%">操作</th>
            </tr>
            </thead>
            <tbody id="tbodyId">

            </tbody>
        </table>
    </div>
    <!-- 分页条-->
    <div class="row">
        <div align="left" class="col-xs-6">
            <div class="input-group">
                <span class="input-group-addon" id="pageCount"></span> <select
                    id="pageSize" onchange="search(1)" class="form-control"
                    style="width: 100px"></select>
            </div>
        </div>
        <div align="right" class="col-xs-6">
            <ul class="pagination" id="pagination"></ul>
        </div>
    </div>
</div>

<div id="depart-box" class="clearfix" style="display: none;">

</div>

<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    //循环列表数据以及操作按钮
    function tableCallBack(data, id) {
        if(id=='saleNumber'){
            return data.saleNumber;
        }
        else if (id == 'banner') {
            if (data[id] != '' && data[id] != null) {
                return '<img width="50" height="50" src=' + data.banner + ' />';
            } else {
                return '<img width="50" height="50" src="${basePath}/images/no_image.png" />';
            }
        }else  if(id == 'sort'){
            return '<input type="number" name="'+data.id+'" class="limit-length" min="1" max="99" style="width:50px;" onfocus="gateSort(this);" id="sort_'+ data.id + '" value='+data.sort+' />';
        } else if (id == 'proportion') {//增加操作按钮
            var _button = '';
            _button += '<button type="button" class="btn btn-white btn-xs" onclick="check(\'' + data.id + '\');">查看收益比 </button> ';
            return _button;
        }else if (id == 'button') {//增加操作按钮
            var _button = '';
            var count = 0;
            _button += '<button type="button" class="btn btn-white btn-xs" onclick="editCha(\'' + data.id + '\');">编辑 </button> ';
            count++
            if (data.shelves == '1'){
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="downMarket(\'' + data.id + '\');">下架</button> ';
                count++
            }else {
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="upMarket(\'' + data.id + '\');">上架</button> ';
                count++
            }
            return _button;
        }
        else if(id == "shelves"){
            if(data[id] == "1"){
                return "<span class='text-green'>上架</span>"
            }
            else{
                return "<span class='text-red'>下架</span>"
            }
        }
        else {
            if (data[id] == null || data[id] == '') {
                return '';
            } else {
                return data[id];
            }
        }
    }

    //新增
    function addLine(){
        window.location.href = "${basePath}/admin/coupon/toAdd"
    }

    //编辑
    function editCha(id){
        window.location.href = "${basePath}/admin/coupon/edit?id=" + id;
    }

    //下架
    function downMarket(id){
        layer.confirm('是否确定此操作？', {
            btn: ['确定','取消'] //按钮
        }, function() {
            $.ajax({
                type: 'GET',
                url: '${basePath}/admin/product/info/upDown?id='+id+'&shelves=0',
                success: function (data) {
                    var data = JSON.parse(data);
                    if (data.code == '0') {
                        layer.alert('下架成功!', {
                            icon: 6
                        }, function(index){
                            layer.closeAll('dialog');
                            search(parseInt($('.active').attr('jp-data')));
                        });
                    } else {
                        layer.alert(data.desc, {
                            icon: 56
                        });
                    }
                }
            });
        });
    }

    //上架
    function upMarket(id){
        layer.confirm('是否确定此操作？', {
            btn: ['确定','取消'] //按钮
        }, function() {
            $.ajax({
                type: 'GET',
                url: '${basePath}/admin/product/info/upDown?id='+id+'&shelves=1',
                success: function (data) {
                    var data = JSON.parse(data);
                    if (data.code == '0') {
                        layer.alert('上架成功!', {
                            icon: 6
                        }, function(index){
                            layer.closeAll('dialog');
                            search(parseInt($('.active').attr('jp-data')));
                        });
                    } else {
                        layer.alert(data.desc, {
                            icon: 56
                        });
                    }
                }
            });
        });
    }

    $(function(){
        $('#start_visit_time').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
//            startDate: new Date(),
            autoclose:true //选择日期后自动关闭

        });
    });

    //详情
    function check(id){
        $.ajax({
            type: 'GET',
            url: '${basePath}/admin/coupon/cashList?productId='+id,
            success: function (data) {
                console.log(data);
                var data = JSON.parse(data);
                if (data.code == '0') {
                    var str ="";
                    for(var i =0;i<data.result.length;i++){
                        str += '<p>'+ data.result[i].cashbackTime+'个月收益：'+ data.result[i].cashbackRatio+'%</p>';
                    }
                    $("#depart-box").html(str);

                    layer.open({
                        type: 1,
                        area: ['500px','auto'],
                        title: ['查看卡券套返现收益比','text-align:center;font-weight:bold;'],
                        content: $("#depart-box")
                    });
                } else {
                    console.log('error');
                }
            }
        });

//        layer.open({
//            type: 1,
//            area: ['500px','auto'],
//            title: ['查看卡券套返现收益比','text-align:center;font-weight:bold;'],
//            content: $("#depart-box")
//        });
    }
</script>
</body>
</html>